<template>
  <div class="contain">
    <el-card>
      <div class="top">
        <el-button
          type="primary"
          @click="showDialog = true"
        >添加员工</el-button>
      </div>

      <el-table :data="employeeList" border style="width: 100%">
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="address" label="操作">
          <template v-slot="{row}">

            <el-button type="primary" @click="edit(row.id)">编辑(分配角色)</el-button>
            <el-button type="danger" @click="delUser(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="params._limit"
        @current-change="currentChange"
      />
    </el-card>

    <addDialog ref="addDialog" :show-dialog.sync="showDialog" @getEmployeeList="getEmployeeList" />
  </div>
</template>

<script>
import addDialog from './component/addDialog.vue'
import { getEmployeeList, getCount, delUser } from '@/api/employee'
export default {
  components: {
    addDialog
  },
  data() {
    return {
      params: {
        _limit: 5,
        _start: 0
      },
      employeeList: [],
      total: 0,
      currentPage: 1,
      showDialog: false
    }
  },
  created() {
    this.getEmployeeList()
    this.getCount()
  },
  methods: {
    async getCount() {
      const res = await getCount()
      this.total = res.data
    },
    async  getEmployeeList(type) {
      // 如果新增时，跳到最后一页
      if (type === 'add') {
        await this.getCount()
        const pageCount = parseInt(this.total / this.params._limit)
        console.log('总：', this.total, 'pacount', pageCount)

        this.currentChange(pageCount + 1)
      } else {
        const res = await getEmployeeList(this.params)
        this.employeeList = res.data
      }
    },
    async currentChange(index) {
      console.log('index', index)
      this.params._start = this.params._limit * (index - 1)

      await this.getEmployeeList()
      // 这要等数据渲染回来
      this.currentPage = index
      await this.getCount()
      console.log('this.currentPage', this.currentPage)
    },
    edit(id) {
      this.$refs.addDialog.getEmployeeById(id)
    },
    async delUser(id) {
      try {
        await this.$confirm('确定删除该用户？')
        await delUser(id)
        this.$message.success('操作成功')

        await this.getCount()
        if (this.total >= this.params._limit && this.total % this.params._limit === 0) {
          this.currentChange(this.currentPage - 1)
        }
        this.getEmployeeList()
      } catch (error) {
        console.log(error)
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.contain {
  padding: 10px;
  .top {
    display: flex;
    padding: 10px;
    margin-bottom: 10px;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid #ddd;
  }
}
</style>
